<template>
  <a-modal
    :width="600"
    v-model="visible"
    :title="title"
    @ok="handleOk"
    okText="确定"
    cancelText="取消"
    :destroyOnClose="true"
    :maskClosable="false"
  >
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="任务名称">
        <a-input v-model="form.name" placeholder="请输入任务名称" />
      </a-form-model-item>

      <a-form-model-item label="任务类型">
        <a-select v-model="form.taskType" placeholder="请选择任务类型">
          <a-select-option value="inference">推理</a-select-option>
          <a-select-option value="validation">验证</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="选择模型">
        <a-select v-model="form.modelName" placeholder="请选择模型">
          <a-select-option v-for="model in modelOptions" :key="model.value" :value="model.value">
            {{ model.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="数据源">
        <a-select v-model="form.dataSource" placeholder="请选择数据源">
          <a-select-option v-for="source in dataSourceOptions" :key="source.value" :value="source.value">
            {{ source.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { createTask, listModels } from '../../../api/model'
export default {
  data() {
    return {
      title: '',
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      // Mock数据
      modelOptions: [],
      dataSourceOptions: [
        { label: '通用对话数据集', value: 'general-dialogue' },
        { label: '代码生成数据集', value: 'code-generation' },
        { label: '数学推理数据集', value: 'math-reasoning' },
        { label: '文本摘要数据集', value: 'text-summary' },
        { label: '多语言翻译数据集', value: 'translation' },
      ],
      form: {
        name: '',
        taskType: undefined,
        modelName: undefined,
        dataSource: undefined,
      },
    }
  },
  methods: {
    async handleOk() {
      // 表单验证
      if (!this.form.name.trim()) {
        this.$message.error('请输入任务名称')
        return
      }
      if (!this.form.taskType) {
        this.$message.error('请选择任务类型')
        return
      }
      if (!this.form.modelName) {
        this.$message.error('请选择模型')
        return
      }
      if (!this.form.dataSource) {
        this.$message.error('请选择数据源')
        return
      }

      try {
        // 调用创建任务接口
        await createTask({
          name: this.form.name.trim(),
          taskType: this.form.taskType,
          modelName: this.form.modelName,
        })

        this.$message.success('创建成功')
        this.$emit('success') // 通知父组件刷新数据
        this.closeModal()
      } catch (error) {
        this.$message.error('创建任务失败：' + (error.message || '未知错误'))
        console.error('创建任务失败:', error)
      }
    },
    closeModal() {
      this.visible = false
      // 重置表单
      this.form = {
        name: '',
        taskType: undefined,
        modelName: undefined,
        dataSource: undefined,
      }
    },
    async showModal() {
      this.visible = true
      this.title = '新建任务'
      // 获取数据源选项
      try {
        const response = await listModels({ name: '' })
        const modalList = response.registered_models || []
        this.modelOptions = modalList.map((item) => ({
          label: item.name,
          value: item.name,
        }))
      } catch (error) {
        console.error('获取数据源列表失败:', error)
      }
    },
  },
}
</script>
